<script>
import { release_scope_search } from "@/api/publish"
import IdentityTypeData from './enumData/IdentityTypeData';
import Country from "./enum/Country";
import CountryData from "./enumData/CountryData"
import ReleaseType from './enum/ReleaseType';
import ScopeSearchType from './enum/ScopeSearchType';

export default {
	data() {
		return {
			listData: [],
			currentCountry: "",
			currentCountryLabel: "",
			currentIdentityType: "",
			currentIdentityTypeLabel: "",
			ReleaseType,
			IdentityTypeData,
			CountryData,
			Country,
			type: null,
			currentScopeSearchType: ScopeSearchType.MyFollow,
			ScopeSearchTypeList: [
				{ label: this.$t('我关注的'), value: ScopeSearchType.MyFollow },
				{ label: this.$t('关注我的'), value: ScopeSearchType.FollowMe },
				{ label: this.$t('合作过的'), value: ScopeSearchType.Cooperation }
			],
			checkedList: [],
			orderId: '',
		}
	},
	onBackPress(event) {
		console.log(event);
		return false;
	},
	onLoad(options) {
		if (this.$store.state.publishCommonBody.release_type === "") {
			this.$store.state.publishCommonBody.release_type = ReleaseType.GONGGONG
		}
		this.releaseScopeSearch()
		if (options.orderId) {
			this.orderId = options.orderId
		}
	},
	computed: {
		checkedCount() {
			return this.checkedList.length
		}
	},
	methods: {
		async releaseScopeSearch() {
			this.listData = [];
			uni.showLoading({
				title: '加载中'
			});
			const res = await release_scope_search({
				user_id: uni.getStorageSync('user_id'),
				type: this.currentScopeSearchType,
				country: this.currentCountry,
				identity_type: this.currentIdentityType
			});
			uni.hideLoading();

			this.listData = this.get(res, 'data.data.data', []).map(item => ({ ...item, checked: false }))
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		submit() {
			if (this.$store.state.publishCommonBody.release_type === ReleaseType.DINGXING) {
				if (this.checkedList.length == 0) {
					return this.toast("请选择用户");
				}
				this.$store.state.publishCommonBody.release_user_id = this.checkedList.join(",")
			}
			console.log('this.orderId---222222', this.orderId)
			uni.redirectTo({
				url: `/pages/publish/publishStep1?orderId=${this.orderId}`,
				notInFrame: true
			})
		},
		checkOne(item) {
			const findedIndex = this.checkedList.findIndex(i => i == item.member.id)
			if (findedIndex > -1) {
				this.checkedList.splice(findedIndex, 1)
			} else {
				this.checkedList.push(item.member.id)
			}
		},
		resetCheckedList() {
			this.checkedList = []
		},
		checkAll() {
			if (this.checkedList.length == this.listData.length) {
				this.resetCheckedList()
			} else {
				this.checkedList = this.listData.map(item => item.member.id)
			}
		},
		log(o) {
			console.log(o);
		},
		setRealseTypeCommon() {
			if (this.checkedList.length > 0) {
				uni.showModal({
					title: this.$t('提示'),
					content: this.$t('切换发布类型将清空已选择的用户，是否确认切换'),
					success: (res) => {
						if (res.confirm) {
							this.$store.state.publishCommonBody.release_type = ReleaseType.GONGGONG
						}
					}
				});
			} else {
				this.$store.state.publishCommonBody.release_type = ReleaseType.GONGGONG
			}
		}
	}
}
</script>

<template>
	<view>
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('发布范围')}}
		</div>
		<view class="flex-col between h-full" style="align-items: stretch;overflow: hidden;">
			<div>
				<!-- ===================类型选择=================== -->
				<div>
					<div class="bg-white between p-35 ">
						<div class="fz28 text-555 font-bold">{{$t('发布类型')}}</div>
						<div class="flex">
							<div class="flex" @click="setRealseTypeCommon">
								<div class="radio"
									:class="{ checked: $store.state.publishCommonBody.release_type == ReleaseType.GONGGONG }">
								</div>
								<div class="font-bold ml-10">{{$t('公共')}}</div>
							</div>
							<div class="flex ml-50"
								@click="$store.state.publishCommonBody.release_type = ReleaseType.DINGXING">
								<div class="radio"
									:class="{ checked: $store.state.publishCommonBody.release_type == ReleaseType.DINGXING }">
								</div>
								<div class="font-bold ml-10">{{$t('定向')}}</div>
							</div>
						</div>
					</div>
				</div>


				<!-- ===================筛选=================== -->

				<template v-if="$store.state.publishCommonBody.release_type == ReleaseType.DINGXING">

					<div class="tab">
						<div class="item fz28" :class="{ active: currentScopeSearchType == item.value }"
							v-for="item in ScopeSearchTypeList" :key="item.value"
							@click="currentScopeSearchType = item.value; releaseScopeSearch();">
							{{ item.label }}
						</div>
					</div>

					<div class="filter">
						<picker mode="selector" range-key="label" :range="CountryData" class="picker" @change="e => {
							currentCountry = CountryData[e.detail.value].value
							currentCountryLabel = CountryData[e.detail.value].label
							releaseScopeSearch()
						}">
							<div class="between">
								<view class="fz24 text-333">{{ currentCountryLabel || $t('国籍') }}</view>
								<image src="/static/icon/down.png" mode="widthFix" class="w-20"></image>
							</div>
						</picker>

						<picker mode="selector" range-key="label" :range="IdentityTypeData" class="picker" @change="e => {
							currentIdentityType = IdentityTypeData[e.detail.value].value
							currentIdentityTypeLabel = IdentityTypeData[e.detail.value].label
							releaseScopeSearch()
						}">
							<div class="between">
								<view class="fz24 text-333">{{ currentIdentityTypeLabel || $t('合作商类型') }}</view>
								<image src="/static/icon/down.png" mode="widthFix" class="w-20"></image>
							</div>
						</picker>

						<div class="fz24 h-80 bg-gray-300  pl-20 pr-20 rounded-18 center text-333 font-bold"
							v-if="currentCountryLabel || currentIdentityTypeLabel" @click="
								currentCountry = '';
							currentCountryLabel = ''
							currentIdentityType = '';
							currentIdentityTypeLabel = ''
							releaseScopeSearch();
							">{{$t('重置筛选')}}</div>

					</div>
				</template>

			</div>


			<!-- ===================列表=================== -->


			<div class="p-30 h-full" v-if="$store.state.publishCommonBody.release_type == ReleaseType.DINGXING">
				<div class="section flex-col flex h-full " style="align-items: stretch;">
					<!-- ===================选择=================== -->
					<div class="between w-full mb-10">
						<div class="flex">
							<div class="checkbox flex" @click="checkAll">
								<image src="/static/icon/checkbox-s.png"
									v-if="this.checkedList.length == this.listData.length && this.listData.length > 0"
									mode="widthFix" class="w-35 h-35"></image>
								<image src="/static/icon/checkbox.png" v-else mode="widthFix" class="w-35 h-35"></image>
								<div class="fz28 text-111 ml-20 mr-20">{{$t('全选')}}</div>
							</div>
						</div>

						<div class="flex text-888" @click="resetCheckedList">
							<image src="/static/icon/reset.png" mode="widthFix" class="w-25 mr-15"></image>
							{{$t('重置')}}
						</div>
					</div>

					<!-- ===================用户列表=================== -->
					<div class="flex-1" style="overflow: auto;">
						<div class="company-item  between mt-20" v-for="item in listData" @click="checkOne(item)">
							<div class="checkbox flex mr-20">
								<image src="/static/icon/checkbox.png"
									v-if="checkedList.findIndex(i => i == item.member_id) == -1" mode="widthFix"
									class="w-35 h-35">
								</image>
								<image src="/static/icon/checkbox-s.png" v-else mode="widthFix" class="w-35 h-35">
								</image>
							</div>
							<div class="h-80 w-full rounded-10 flex between" style="background: #F7F7F7;">
								<div class="flex">
									<image :src="getImageUrl(get(item, 'member.avatar'))" mode="aspectFill"
										class="w-40 h-40 ml-20 rounded-6"></image>
									<div class="fz28 ellipsis ml-20" style="width: 350rpx;">

										{{ get(item,
											'member.username') }}</div>
								</div>
								<flag class="w-50 mr-20" :country="item.country" />
							</div>
						</div>
						<div style="height: 500rpx;"></div>
					</div>


				</div>



			</div>

			<!-- ===================提交=================== -->

			<div class="form-control p-30 bg-white">
				<div class="submit center flex-col h-100 bg-primary text-white fz32 rounded-50" @click="submit">
					<div class="font-bold">{{$t('确认')}}</div>
					<div class="fz22 mt-5" v-if="$store.state.publishCommonBody.release_type === ReleaseType.DINGXING">
						（{{$t('当前已选')}}
						{{ checkedCount }}）</div>
				</div>
			</div>


		</view>
	</view>
</template>


<style lang="less">
.form-control {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 9;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 20rpx;
}

.filter {
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 20rpx 30rpx;
	gap: 24rpx;
	border-top: 1rpx solid #f5f5f5;

	.between {
		height: 80rpx;
		padding: 0 30rpx;
	}

	.picker {
		flex: 1;
		background-color: #F7F7F7;
		height: 80rpx;
		border-radius: 18rpx;
	}
}

.tab {
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	border-top: 1rpx solid #f5f5f5;
	padding: 35rpx 0;
	font-size: 28rpx;
	color: #8C8C8C;
}

.active {
	color: #278AFF;
	font-weight: bold;
	position: relative;

	&:before {
		content: "";
		width: 50rpx;
		height: 4rpx;
		background-color: #278AFF;
		position: absolute;
		left: 50%;
		bottom: -13rpx;
		margin-left: -25rpx;
	}
}

.radio {
	border: 1rpx solid #999;
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
}

.checked {
	border: 8rpx solid #278AFF;
}

.section {
	padding: 35rpx 24rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

page {
	background-color: #F6F7FB;
	height: 100%;
}
</style>